<template>
  <svg class="current-line" @click.prevent.stop="itemRightClick($event, 'gelidao', jg_name, name,brandInfo,data_id,stateDesc,isMainPage,info)"
    @contextmenu.stop.prevent="checkState"
  >
   <g :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')scale('+scale+')'" class="cursor-pointer">
     <rect width="40" height="20" fill="transparent" x="0" y="30"></rect>
     <template v-if="state == 1">
       <circle cx="0" cy="40" r="5" fill="#FF5B41"/>
       <line x1="2" y1="40" x2="42" y2="40" stroke="#FF5B41" stroke-width="4"></line>
         <circle cx="40" cy="40" r="5" fill="#FF5B41"/>
     </template>
     <template v-else>
       <circle cx="0" cy="40" r="5" fill="none" stroke="#93f958" stroke-width="3"  />
       <line x1="5" y1="25" x2="35" y2="40" stroke="#93f958" stroke-width="4"></line>
         <circle cx="40" cy="40" r="5" fill="none" stroke="#93f958" stroke-width="3"  />
     </template>
   </g>
    <g :transform="'translate(' + translateX + ',' + translateY + ')scale('+textScale+')rotate('+textRotate+')'" class="cursor-pointer">
      <g v-if="rotate === 0" :transform="'translate(' + textTranslateX + ',' + textTranslateY + ')'">
        <text x="0" y="20" fill="#fff">{{name}}</text>
      </g>
      <g v-else-if="rotate === -90" :transform="'translate(' + textTranslateX + ',' + textTranslateY + ')'">
        <text x="-15" y="-15" fill="#fff">{{name}}</text>
      </g>
      <g v-else-if="rotate === 90" :transform="'translate(' + textTranslateX + ',' + textTranslateY + ')'">
        <text x="-20" y="25" fill="#fff">{{name}}</text>
      </g>
      <g v-else-if="rotate === 180" :transform="'translate(' + textTranslateX + ',' + textTranslateY + ')'">
        <text x="-20" y="25" fill="#fff">{{name}}</text>
      </g>
    </g>
  </svg>
</template>
<script>
import {submitOperateRecord} from "@/api/api";

export default {
  props: {
      jg_name: {
          type: String,
          default: ""
      },
    textTranslateY:{
      type: Number,
      default: 0
    },
      info:{
          type: Object,
          default: function () {
              return {}
          }
      },
      scale:{
          type: Number,
          default: 1
      },
      stateDesc:{
          type: String,
          default: ''
      },
      isMainPage:{
          type: Boolean,
          default: false
      },
      brandInfo:{
          type: String,
          default: ""
      },
      data_id:{
          type: String,
          default: ''
      },
    name: {
      required: true, // 控件名称
      type: String
    },
      textScale:{
          type: Number,
          default: 1
      },
    textRotate:{
        type: Number,
        default: 0
      },
    state: {    // 控件状态
      required: true,
      type: Number,
      default: 0
    },
    controlIndex: { // 控件索引
      required: false,
      type: Number,
    },
    translateX: { // x轴偏移，默认0
      type: Number,
      default: 0
    },
    translateY: { // y轴偏移，默认0
      type: Number,
      default: 0
    },
    rotate: {  // z轴旋转角度,注意不是原地旋转，需要根据x、y轴偏移来调整
      type: Number,
      default: 0
    },
    textTranslateX: { // 文本x偏移
      type: Number,
      default: 0
    }
  },
	data() {
		return {
			faultAbnormalObj: {
				faultData: [
					{id:1, label: '隔离刀动作1'},
					{id:2, label: '隔离刀动作2'},
				],
				abnormalData: [
					{id:1, label: '隔离刀着火', typeList:[{value: 0, label: '正常'}, {value: 1, label: '着火'}], currentType: {value:0, label: '正常'}},
					{id:2, label: '隔离刀漏油', typeList:[{value: 0, label: '正常'}, {value: 1, label: '漏油'}], currentType: {value:0, label: '正常'}},
				],
			}
		}
	},
  methods: {
    // 右键事件
   //  contextMenuHandler() {
			// // this.$emit('contextmenu', this.controlIndex);
			// let params = {
			// 	name: this.name,
			// 	state: this.state,
			// 	controlIndex: this.controlIndex,
			// 	controlStatusList: [{value:0,label: '分开'},{value:1, label: '合上'}]
			// }
   //    this.$emit('contextmenu', params);
   //  },

		// 右击菜单
      checkState(){
        if (this.$store.state.isMainPage) return
          this.desc=this.$store.state.operDescData.find(item=>item.type==='jc'&&item.comType==='开关').desc;
          this.desc=this.desc.replace('jgName',this.info.jg_name).replace('devName',this.info.state_desc).replace('state', (Number(this.state) === 0 ? "分" : "合"))
          submitOperateRecord( {log_desc:this.desc})
      },
		itemRightClick(event, type, jianGeMing, deviceName,brandInfo,data_id,stateDesc,isMainPage,info) {
			event.preventDefault(); // 阻止默认的右键菜单弹出
			// 显示自定义右键菜单
			const {clientX, clientY} = event
			let params = {
				clientX,
				clientY,
          isMainPage,
				type,
          info,
				jianGeMing,
				deviceName,
          brandInfo,
          data_id,
          stateDesc,
				faultAbnormalObj: this.faultAbnormalObj,
				currentObj: {
					name: this.name,
					state: this.state,
					controlIndex: this.controlIndex,
					controlStatusList: [{value:0,label: '分'},{value:1, label: '合'}],
				},
				yaokongObj: {
					value: 1,
					title: '330KV元墩变',
					measurePoint: this.name ,
					state: this.state,
				},
				guzhangshezhiObj: {
					value: 5,
					deviceName: '1号主变',
				},
				guapaiObj: {
					factory: '330KV元墩变',
					factoryName: '2号主变' + this.name,
				}
			}
			this.$emit('itemRightClick', params)
		},

    // 点击事件
    clickHandler() {
      this.$emit('changeStatus', {
        controlIndex: this.controlIndex,
        state: this.state === 1 ? 0 : 1
      });
    },
  }
}
</script>
<style lang="less" scoped>
.cursor-pointer {
  cursor: pointer;
}
svg {
  transform-origin: center center;
}
</style>
